<template>
	<view class="b-keyboard" @touchmove.stop.prevent="">
		<view class="key-grids">
			<view v-for="(item, index) in numList" :key="index" :hover-stay-time="100" @tap="keyboardClick(item)"
				:class="item === '>' || item === '<' ? 'key-item key-item-high' : 'key-item'"
				hover-class="b-keyboard-hover">

				<view v-if="item==='>'" :hover-stay-time="100" @touchstart.stop="backspaceClick" @touchend="clearTimer">
					<u-icon name="backspace" :size="38" :bold="true"></u-icon>
				</view>

				<view v-else-if="item==='<'" style="background-color: #dd524d;" @touchstart.stop.prevent="confirm">
					确认
				</view>

				<view v-else-if="item==='calc'" @click.stop.prevent="goCala">
					<view class="iconfont icon-calculator"></view>
				</view>
				<text v-else>{{item}}</text>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "b-number-keyboard",
		props: {
			// 输入的数字
			number: {
				type: String,
				default: ''
			},
			// 事件回传ID
			eventId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				numList: ["1", "4", "7", ".", "2", "5", "8", "0", "3", "6", "9", "calc", ">", "<"]
			};
		},
		methods: {
			// 点击退格键
			backspaceClick() {
				this.$emit('backspace');
				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
				this.timer = null;
				this.timer = setInterval(() => {
					this.$emit('backspace');
				}, 250);
			},
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			confirm() {
				this.$emit('confirm');
			},
			// 获取键盘显示的内容
			keyboardClick(val) {
				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
				this.$emit('change', val);

			},
			goCala() {
				uni.navigateTo({
					url: '/pages/utils/calculator/calculator?num=' + this.number + '&eventId=' + this.eventId
				});

			}
		}
	}
</script>

<style lang="scss">
	@import "@/components/zgwit-iconfont/iconfont.css";

	.b-keyboard {
		position: relative;
		z-index: 1003;
	}

	.key-grids {
		width: 100%;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		.key-item {

			width: 25%;
			height: 150rpx;
			line-height: 150rpx;
			vertical-align: middle;
			background-color: $uni-text-color;
			font-size: 50rpx;
			font-weight: 500;
			text-align: center;
			color: $uni-text-color-inverse;
			// border: 1px solid $uni-text-color-grey;
		}

		.key-item-high {

			height: 300rpx;
			line-height: 300rpx;
			// border: 1px solid $uni-text-color-grey;
		}

		.b-keyboard-hover {
			background-color: $uni-text-color-placeholder;
		}
	}
</style>
